<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>测试</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    {% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message[0]}}"> <i class="ti-user"></i> {{ message[1]}}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span>
        </button>
    </div>
    {% endfor %}
    {% endif %}
    {% endwith %}
    <div id="app">
    <div class="panel panel-default" style="width: 600px; margin: 0 auto; margin-top: 40px;;">


        <div class="panel-heading">
            <h3 class="panel-title">确认订单</h3>
        </div>
        <div class="panel-body">

            <form id="myform" action="" method="POST">
                {{ form.csrf_token }}
                <div class="form-group">
                    <label for="exampleInputEmail1">昵称</label>
                    <input id="nickname" type="text" class="form-control" placeholder="昵称">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">金额</label>
                    <input id="price" type="text" class="form-control" placeholder="￥0.10">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">您的邮箱</label>
                    <input id="email" type="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">留言</label>
                    <input id="messages" type="text" class="form-control">
                </div>
                <div @click="wechat_submit" class="btn btn-default">支付</div>
            </form>
        </div>
    </div>

    <div class="panel panel-default" style="width: 600px; margin: 0 auto; margin-top: 40px; margin-bottom: 50px;">
        <!-- Default panel contents -->
        <div class="panel-heading">订单记录</div>

        <!-- Table -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>昵称</th>
                    <th>金额</th>
                    <th>邮件</th>
                    <th>状态</th>
                    <th>时间</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <th scope="row">{{ loop.index }}</th>
                    <td>{{ item.nickname }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.status }}</td>
                    <td>{{ item.created_at }}</td>

                    {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">微信支付(输入你的备注信息 <span style="color:red">${num}</span>)</h4>
                </div>
                <div class="modal-body">
                    <div class="thumbnail">
                        <img style="height:300px" src="https://lsol-uploads.oss-cn-hangzhou.aliyuncs.com/wechatpay.jpeg">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <div @click="form_submit" class="btn btn-primary">支付完成</div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            delimiters: ['${', '}'],
            data: {
                num: null,
                form: {
                    title: null
                }
            },
            created: function () {
            },
            methods: {
                wechat_submit() {
                    let csrf_token = $('#csrf_token').val()
                    let nickname = $('#nickname').val()
                    let price = $('#price').val()
                    let email = $('#email').val()
                    let messages = $('#messages').val()
                    if (!nickname) {
                        alert('姓名不能为空')
                        return false
                    }
                    let data = {
                        csrf_token,
                        nickname,
                        price,
                        email,
                        messages
                    }
                    let that = this
                    $.post("/frontend/orders/create", data, function(res) {
                        console.log(res)
                        if (res.success){
                            $('#myModal').modal('toggle')
                            that.num = res.data.id
                        }
                    })
                },
                form_submit() {
                    $.get("/frontend/orders/pull/" + this.num, function(res) {
                        if (res.success){
                            window.location.href = "{{url_for('forntend_orders.index')}}"
                        }
                    })
                }
            }
        })
    </script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>